﻿@model List<ReportModel>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "报文列表查询";
    List<ShipModel> ships=(List<ShipModel>)ViewData["Ships"];
}
<link href="/Content/assets/plugins/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
<link href="/Content/assets/plugins/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
<div id="content" class="content">
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li><a href="javascript:;">报文列表</a></li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <!-- end page-header -->
    <!-- begin row -->
    <div class="row">
        <!-- begin col-12 -->
        <div class="col-md-12">
            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-body">
                    <div class="col-md-8">
                        <div class="input-group input-daterange" data-date-format="yyyy-mm-dd">
                            <span class="input-group-addon">查询条件</span>
                            <input type="text" class="form-control" name="start" id="start" placeholder="开始时间">
                            <span class="input-group-addon">到</span>
                            <input type="text" class="form-control" name="end" id="end" placeholder="结束时间">
                            <span class="input-group-addon" id="search" style="cursor: pointer; ">查询</span>
                            <select class="form-control" style="width:43%;" id="shipname">
                                <option value="">请选择船舶名称</option>
                                @foreach (var ship in ships)
                                {
                                    <option value="@ship.MMSI">@ship.Name</option>
                                }
                            </select>

                            <select class="form-control" id="reportType" style="width:50%;">
                                <option value="">请选择报文类型</option>
                                <option value="AGENCY">AGENCY</option>
                                <option value="ANCHORAGE">ANCHORAGE</option>
                                <option value="ARRIVAL">ARRIVAL</option>
                                <option value="BERTHING">BERTHING</option>
                                <option value="DAILY">DAILY</option>
                                <option value="DEPARTURE">DEPARTURE</option>
                                <option value="POSITION">POSITION</option>
                                <option value="ROUTE">ROUTE</option>
                                <option value="SHIFTING">SHIFTING</option>
                            </select>
                        </div>
                        
                    </div>
                       
                    <div style="clear:both; padding-top:10px;"></div>
                    <div class="table-responsive">
                        
                        <table id="data-table" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>报告类型</th>
                                <th>报告时间</th>
                                <th>MMSI</th>
                                <th>船名</th>
                                @*<th style="display: none;">报文内容</th>*@
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach (var data in Model)
                            {
                                <tr class="odd">
                                    <td>@data.Type</td>
                                    <td>@data.ReportTime</td>
                                    <td>@data.MMSI</td>
                                    <td>@data.ShipName</td>
                                    @*<td style="display: none">@data.Value</td>*@
                                    <td>
                                        <a class="btn btn-primary btn-xs m-r-5 m-b-5" onclick="showDetail(@data.Value)" >查看报文</a>
                                    </td>
                                </tr>
                            }



                            @*<tr class="odd ">
                                <td><a href="#">Crident</a></td>
                                <td>Internet Explorer 4.0</td>
                                <td>否</td>
                                <td>2016-05-11 11:12:24</td>
                            </tr>
                            <tr class="odd ">
                                <td><a href="#">Trident</a></td>
                                <td>Internet Explorer 4.0</td>
                                <td>是</td>
                                <td>2016-05-03 11:12:24</td>
                            </tr>*@
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end col-12 -->
    </div>
    <!-- end row -->
</div>
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 730px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">报文信息</h4>
            </div>
            <div class="modal-body">
                <iframe src="#" width="700" height="500" id="reportDetail" allowTransparency="true" style="border: none;" >
                </iframe> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@section footer {
    <script src="/Content/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="/Content/assets/plugins/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js"></script>
    <script>

        $(document).ready(function() {
                $('.input-daterange')
                    .datepicker({
                        language: 'zh-CN',
                        autoclose: true,
                        todayHighlight: true
                    });
                App.init();
                $("#data-table").DataTable();
                $("#search").click(function() {
                    search();
                });
            setData();

            $("#shipname").change(function () {
                search();
            });
            $("#reportType").change(function () {
                search();

            });


        });

        function search()
        {
            var start = $("#start").val();
            var end = $("#end").val();
            var mmsi = $("#shipname").val();
            var type = $("#reportType").val();
            window.location.href = "@Url.Action("ReportList","Home")?start=" + start + "&end=" + end + "&mmsi=" + mmsi + "&type=" + type;
        }




        function setData() {
            var start = GetQueryString("start");
            var end = GetQueryString("end");
            var shipname = GetQueryString("shipname");
            var mmsi = GetQueryString("mmsi");
            var type = GetQueryString("type");
            if (start != null) {
                $("#start").val(start);
            } else
            {
                $("#start").val("@(DateTime.Now.AddDays(-3).ToString("yyyy-MM-dd"))");

            }
            if (end != null) {
                $("#end").val(end);
            } else
            {
                $("#end").val("@(DateTime.Now.ToString("yyyy-MM-dd"))");

            }
            if (shipname != null) {
                $("#end").val(end);
            }
            if (mmsi != null) {
                $("#shipname").val(mmsi);
            }
            if (type != null) {
                $("#reportType").val(type);
            }
        }

        function showDetail(value) {
            var id = value.DataUin.Id;
            var type = value.DataUin.Type;
            $("#reportDetail").attr("src", "http://121.41.20.153:19643/report/" + type + "/" + id);
            $(".modal").modal();
        }



    </script>
}
